<template>
	<div class="seek">
		<form action="/">
		  <van-search
		    v-model="value"
		    show-action
		    placeholder="请输入搜索关键词"
		    @search="onSearch"
		    @cancel="onCancel"
		  />
		</form>
		<div class="dump">
			<p>搜索历史</p>
			<button type="button">完成</button>
			<span>全部删除</span>
			
		</div>
		<div class="content">
			<p>11111 </p>
			<van-icon name="delete-o" />
		</div>
		
	</div>
</template>

<script>
	import { Search } from 'vant';
	import { Icon } from 'vant';
	
	export default {
		components:{
			[Search.name]:Search,
			[Icon.name]:Icon,
		},
	  data() {
	    return {
	      value: '',
	    };
	  },
	  methods: {
	    onSearch(val) {
	      Toast(val);
	    },
	    onCancel() {
	      Toast('取消');
	    },
	  },
	}
</script>

<style>
	.seek{
		margin: 0;
		padding: 0;
	}
	.dump{
		width: 375px;
		height: 40px;
		background-color: #f1f1f1;
	}
	.dump p{
		float: left;
		margin-top: 10px;
		margin-left: 10px;
		font-size: 14px;
		
	}
	.dump span{
		float: right;
		margin-right: 8px;
		font-size: 12px;
		line-height: 40px;
		text-align: center;
		color: #787878;
	}
	.dump button{
		float: right;
		margin-right: 15px;
		font-size: 12px;
		line-height: 40px;
		text-align: center;
		color: #787878;
		border: none;
		background-color: transparent;
	}
	.content{
		margin-top: 1px;
		width: 375px;
		height: 40px;
		background-color: #f1f1f1;
	}
	.content p{
		float: left;
		margin-top: 10px;
		margin-left: 10px;
		font-size: 14px;
	}
	.van-icon-delete-o:before{
		font-size: 12px;
		margin-left: 300px;
		line-height: 40px;
		text-align: center;
	}
	
	
	
</style>
